<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    v-bind="attrs"
  >
    <el-form-item
      v-for="(item, key) in formItems"
      :key="key"
      :label="item.label"
      :prop="item.prop"
    >
      <component
        :is="attrs.hideRequiredAsterisk ? 'span' :item.component"
        v-model="formData[key]"
        v-bind="item.bindProps|| {}"
        :placeholder="item.placeholder"
      >
      <!-- 为span标签时展示该内容 -->
        <template v-if="attrs.hideRequiredAsterisk">{{ formData[key]}}</template>
      </component>
    </el-form-item>
    <el-form-item v-if="!attrs.hideRequiredAsterisk">
      <el-button type="primary" @click="subMit">确定</el-button>
      <el-button @click="rest">取消</el-button>
    </el-form-item>
    </el-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'MForm',
})
</script>
<script setup  lang="ts">
defineProps({
    formData:{
        type:Object,
        default:()=>{}
    },
    formRules:{
        type:Object,
        default:()=>{}
    },
    formItems:{
        type:Object,
        default:()=>{}
    },
})
const formRef = defineModel('formRef')
const emits = defineEmits(['handleFormSubMit','handleFormRest'])
const attrs = useAttrs()

const subMit = ()=>{
    emits('handleFormSubMit')
}
const rest = ()=>{
    emits('handleFormRest')
}
</script>

<style  lang="scss" scoped></style>
